const VoteList = {
    template: `
        <div class="vote-list">
            <el-row :gutter="20">
                <el-col :span="24" v-for="vote in votes" :key="vote.id">
                    <el-card class="vote-card">
                        <template #header>
                            <div class="card-header">
                                <h3>{{ vote.title }}</h3>
                                <el-tag :type="vote.isActive ? 'success' : 'info'">
                                    {{ vote.isActive ? '进行中' : '已结束' }}
                                </el-tag>
                            </div>
                        </template>
                        <div class="vote-content">
                            <p>{{ vote.description }}</p>
                            <div class="vote-options">
                                <div v-for="option in vote.options" :key="option.id" 
                                     class="vote-option" 
                                     @click="selectOption(vote.id, option.id)">
                                    <el-progress 
                                        :percentage="calculatePercentage(vote, option)"
                                        :color="getProgressColor(calculatePercentage(vote, option))"
                                        class="vote-progress">
                                        <template #default="{ percentage }">
                                            <span class="vote-statistics">
                                                {{ option.text }} ({{ percentage }}%)
                                            </span>
                                        </template>
                                    </el-progress>
                                </div>
                            </div>
                            <div class="vote-footer">
                                <span class="vote-time">
                                    创建时间：{{ formatDate(vote.createdAt) }}
                                </span>
                                <el-button type="primary" 
                                         size="small" 
                                         @click="viewDetails(vote.id)">
                                    查看详情
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    `,
    data() {
        return {
            votes: []
        }
    },
    methods: {
        async fetchVotes() {
            try {
                const response = await fetch('/api/votes');
                this.votes = await response.json();
            } catch (error) {
                console.error('获取投票列表失败:', error);
                this.$message.error('获取投票列表失败');
            }
        },
        calculatePercentage(vote, option) {
            const totalVotes = vote.records.length;
            if (totalVotes === 0) return 0;
            const optionVotes = vote.records.filter(r => r.voteOptionId === option.id).length;
            return Math.round((optionVotes / totalVotes) * 100);
        },
        getProgressColor(percentage) {
            if (percentage >= 70) return '#67C23A';
            if (percentage >= 40) return '#E6A23C';
            return '#F56C6C';
        },
        formatDate(date) {
            return new Date(date).toLocaleString();
        },
        async selectOption(voteId, optionId) {
            try {
                const response = await fetch('/api/votes/vote', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ voteId, optionId })
                });
                
                if (response.ok) {
                    this.$message.success('投票成功');
                    await this.fetchVotes();
                } else {
                    this.$message.error('投票失败');
                }
            } catch (error) {
                console.error('投票失败:', error);
                this.$message.error('投票失败');
            }
        },
        viewDetails(voteId) {
            window.location.href = `/Votes/Details/${voteId}`;
        }
    },
    mounted() {
        this.fetchVotes();
    }
}; 

export default VoteList; 